<template>
  <div class="task-setting-container">
    <a-breadcrumb class="breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/salvation">超度与救赎</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <router-link to="/salvation/redemption-plan">救赎计划管理</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>救赎任务设置</a-breadcrumb-item>
    </a-breadcrumb>

    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">救赎任务设置</h1>
        <p class="page-subtitle">管理救赎任务模板、难度等级、奖惩机制</p>
      </div>
      <div class="header-actions">
        <a-button type="primary" @click="handleCreate">
          <template #icon><PlusOutlined /></template>
          新建任务
        </a-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <a-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon stat-icon-primary">
            <ProfileOutlined />
          </div>
          <div class="stat-info">
            <div class="stat-value">45</div>
            <div class="stat-label">总任务数</div>
          </div>
        </div>
      </a-card>

      <a-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon stat-icon-success">
            <CheckCircleOutlined />
          </div>
          <div class="stat-info">
            <div class="stat-value">38</div>
            <div class="stat-label">激活任务</div>
          </div>
        </div>
      </a-card>

      <a-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon stat-icon-warning">
            <ClockCircleOutlined />
          </div>
          <div class="stat-info">
            <div class="stat-value">72.5%</div>
            <div class="stat-label">完成率</div>
          </div>
        </div>
      </a-card>

      <a-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon stat-icon-info">
            <TrophyOutlined />
          </div>
          <div class="stat-info">
            <div class="stat-value">2.3</div>
            <div class="stat-label">平均难度</div>
          </div>
        </div>
      </a-card>
    </div>

    <!-- 搜索和筛选 -->
    <a-card class="filter-card">
      <a-row :gutter="16" align="middle">
        <a-col :span="6">
          <a-input-search v-model:value="searchText" placeholder="搜索任务名称、类型" @search="handleSearch" />
        </a-col>
        <a-col :span="4">
          <a-select v-model:value="filterDifficulty" placeholder="难度等级" style="width: 100%" allowClear>
            <a-select-option value="1">简单</a-select-option>
            <a-select-option value="2">普通</a-select-option>
            <a-select-option value="3">困难</a-select-option>
            <a-select-option value="4">地狱</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="4">
          <a-select v-model:value="filterStatus" placeholder="状态" style="width: 100%" allowClear>
            <a-select-option value="active">激活</a-select-option>
            <a-select-option value="inactive">停用</a-select-option>
            <a-select-option value="draft">草稿</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="4">
          <a-select v-model:value="filterCategory" placeholder="任务类型" style="width: 100%" allowClear>
            <a-select-option value="moral">道德重塑</a-select-option>
            <a-select-option value="service">公益服务</a-select-option>
            <a-select-option value="study">学习修行</a-select-option>
            <a-select-option value="reflection">反思忏悔</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <a-space>
            <a-button @click="resetFilters">重置</a-button>
            <a-button type="primary" @click="applyFilters">筛选</a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-card>

    <!-- 任务列表 -->
    <a-card class="table-card">
      <a-table :columns="columns" :data-source="tasksData" :pagination="pagination" :loading="loading" row-key="id">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <div class="task-info">
              <div class="task-name">{{ record.name }}</div>
              <div class="task-description">{{ record.description }}</div>
            </div>
          </template>

          <template v-else-if="column.key === 'difficulty'">
            <a-tag :color="getDifficultyColor(record.difficulty)">
              {{ getDifficultyText(record.difficulty) }}
            </a-tag>
          </template>

          <template v-else-if="column.key === 'category'">
            <a-tag :color="getCategoryColor(record.category)">
              {{ getCategoryText(record.category) }}
            </a-tag>
          </template>

          <template v-else-if="column.key === 'rewards'">
            <div class="rewards-info">
              <span class="merit-points">+{{ record.meritReward }} 功德</span>
              <span class="exp-points">+{{ record.expReward }} 经验</span>
            </div>
          </template>

          <template v-else-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">
              {{ getStatusText(record.status) }}
            </a-tag>
          </template>

          <template v-else-if="column.key === 'actions'">
            <a-dropdown>
              <template #overlay>
                <a-menu @click="handleMenuClick($event, record)">
                  <a-menu-item key="view"> <EyeOutlined /> 查看详情 </a-menu-item>
                  <a-menu-item key="edit"> <EditOutlined /> 编辑 </a-menu-item>
                  <a-menu-item key="copy"> <CopyOutlined /> 复制 </a-menu-item>
                  <a-menu-divider />
                  <a-menu-item key="toggle">
                    <PoweroffOutlined />
                    {{ record.status === 'active' ? '停用' : '激活' }}
                  </a-menu-item>
                  <a-menu-item key="delete" class="danger-item"> <DeleteOutlined /> 删除 </a-menu-item>
                </a-menu>
              </template>
              <a-button type="text"> 操作 <DownOutlined /> </a-button>
            </a-dropdown>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 新增/编辑任务模态框 -->
    <a-modal v-model:open="showTaskModal" :title="isEditing ? '编辑任务' : '新增任务'" width="800px" @ok="handleSaveTask" @cancel="resetTaskForm" :confirmLoading="saving">
      <a-form ref="taskFormRef" :model="taskForm" :rules="taskRules" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="任务名称" name="name">
              <a-input v-model:value="taskForm.name" placeholder="请输入任务名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="任务类型" name="category">
              <a-select v-model:value="taskForm.category" placeholder="请选择任务类型">
                <a-select-option value="moral">道德重塑</a-select-option>
                <a-select-option value="service">公益服务</a-select-option>
                <a-select-option value="study">学习修行</a-select-option>
                <a-select-option value="reflection">反思忏悔</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="任务描述" name="description">
          <a-textarea v-model:value="taskForm.description" placeholder="请输入任务描述" :rows="3" />
        </a-form-item>

        <a-row :gutter="16">
          <a-col :span="8">
            <a-form-item label="难度等级" name="difficulty">
              <a-select v-model:value="taskForm.difficulty" placeholder="选择难度">
                <a-select-option :value="1">简单</a-select-option>
                <a-select-option :value="2">普通</a-select-option>
                <a-select-option :value="3">困难</a-select-option>
                <a-select-option :value="4">地狱</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="功德奖励" name="meritReward">
              <a-input-number v-model:value="taskForm.meritReward" :min="1" :max="10000" style="width: 100%" placeholder="功德值" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="经验奖励" name="expReward">
              <a-input-number v-model:value="taskForm.expReward" :min="1" :max="1000" style="width: 100%" placeholder="经验值" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="时间限制(天)" name="timeLimit">
              <a-input-number v-model:value="taskForm.timeLimit" :min="1" :max="365" style="width: 100%" placeholder="完成期限" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="失败惩罚" name="penalty">
              <a-input-number v-model:value="taskForm.penalty" :min="0" :max="1000" style="width: 100%" placeholder="功德扣除" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="任务要求" name="requirements">
          <a-textarea v-model:value="taskForm.requirements" placeholder="请详细描述任务要求和评估标准" :rows="4" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 任务详情模态框 -->
    <a-modal v-model:open="showDetailModal" title="任务详情" width="800px" :footer="null">
      <div class="task-detail" v-if="selectedTask">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="任务名称" :span="2">
            <strong>{{ selectedTask.name }}</strong>
          </a-descriptions-item>
          <a-descriptions-item label="任务类型">
            <a-tag :color="getCategoryColor(selectedTask.category)">
              {{ getCategoryText(selectedTask.category) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="难度等级">
            <a-tag :color="getDifficultyColor(selectedTask.difficulty)">
              {{ getDifficultyText(selectedTask.difficulty) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="功德奖励">
            <span class="merit-points">+{{ selectedTask.meritReward }} 功德</span>
          </a-descriptions-item>
          <a-descriptions-item label="经验奖励">
            <span class="exp-points">+{{ selectedTask.expReward }} 经验</span>
          </a-descriptions-item>
          <a-descriptions-item label="时间限制"> {{ selectedTask.timeLimit }} 天 </a-descriptions-item>
          <a-descriptions-item label="失败惩罚">
            <span class="penalty-text">-{{ selectedTask.penalty }} 功德</span>
          </a-descriptions-item>
          <a-descriptions-item label="状态">
            <a-tag :color="getStatusColor(selectedTask.status)">
              {{ getStatusText(selectedTask.status) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="分配数量"> {{ selectedTask.assignedCount }} 人 </a-descriptions-item>
          <a-descriptions-item label="创建时间" :span="2">
            {{ selectedTask.createdTime }}
          </a-descriptions-item>
          <a-descriptions-item label="任务描述" :span="2">
            {{ selectedTask.description }}
          </a-descriptions-item>
          <a-descriptions-item label="任务要求" :span="2">
            {{ selectedTask.requirements || '暂无详细要求' }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { PlusOutlined, ProfileOutlined, CheckCircleOutlined, ClockCircleOutlined, TrophyOutlined, EditOutlined, CopyOutlined, PoweroffOutlined, DeleteOutlined, DownOutlined, EyeOutlined } from '@ant-design/icons-vue'
import { message, Modal } from 'ant-design-vue'

// 响应式数据
const loading = ref(false)
const saving = ref(false)
const searchText = ref('')
const filterDifficulty = ref(undefined)
const filterStatus = ref(undefined)
const filterCategory = ref(undefined)

// 模态框控制
const showTaskModal = ref(false)
const showDetailModal = ref(false)
const isEditing = ref(false)
const selectedTask = ref(null)

// 任务数据
const tasksData = ref([
  {
    id: 1,
    name: '孤儿院志愿服务',
    description: '在当地孤儿院进行为期一个月的志愿服务，照顾儿童日常生活',
    category: 'service',
    difficulty: 2,
    meritReward: 500,
    expReward: 100,
    timeLimit: 30,
    penalty: 100,
    status: 'active',
    assignedCount: 12,
    createdTime: '2024-01-15',
    requirements: '需要参与儿童照顾、教育活动组织、环境维护等工作，每周至少服务20小时。'
  },
  {
    id: 2,
    name: '道德经研读',
    description: '深入研读道德经全文，撰写心得体会不少于5000字',
    category: 'study',
    difficulty: 3,
    meritReward: 800,
    expReward: 150,
    timeLimit: 60,
    penalty: 200,
    status: 'active',
    assignedCount: 8,
    createdTime: '2024-01-10',
    requirements: '完成道德经全81章研读，提交不少于5000字的心得体会，需包含个人感悟和实践计划。'
  },
  {
    id: 3,
    name: '环保清洁行动',
    description: '组织或参与社区环保清洁活动，清理垃圾，保护环境',
    category: 'service',
    difficulty: 1,
    meritReward: 300,
    expReward: 50,
    timeLimit: 7,
    penalty: 50,
    status: 'active',
    assignedCount: 25,
    createdTime: '2024-01-20',
    requirements: '参与社区环保活动至少3次，每次不少于4小时，提交活动照片和总结报告。'
  }
])

// 表单数据
const taskFormRef = ref(null)
const taskForm = ref({
  name: '',
  description: '',
  category: undefined,
  difficulty: undefined,
  meritReward: 100,
  expReward: 20,
  timeLimit: 30,
  penalty: 50,
  requirements: ''
})

// 表单验证规则
const taskRules = {
  name: [{ required: true, message: '请输入任务名称' }],
  description: [{ required: true, message: '请输入任务描述' }],
  category: [{ required: true, message: '请选择任务类型' }],
  difficulty: [{ required: true, message: '请选择难度等级' }],
  meritReward: [{ required: true, message: '请输入功德奖励' }],
  expReward: [{ required: true, message: '请输入经验奖励' }],
  timeLimit: [{ required: true, message: '请输入时间限制' }],
  requirements: [{ required: true, message: '请输入任务要求' }]
}

// 表格列配置
const columns = [
  { title: '任务信息', key: 'name', width: 250 },
  { title: '类型', key: 'category', width: 100 },
  { title: '难度', key: 'difficulty', width: 80 },
  { title: '奖励', key: 'rewards', width: 120 },
  { title: '状态', key: 'status', width: 80 },
  { title: '分配数量', dataIndex: 'assignedCount', width: 100 },
  { title: '创建时间', dataIndex: 'createdTime', width: 120 },
  { title: '操作', key: 'actions', width: 100, fixed: 'right' }
]

// 分页配置
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 3,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total, range) => `共 ${total} 条记录`
})

// 辅助函数
const getDifficultyColor = (difficulty) => {
  const colors = { 1: 'green', 2: 'blue', 3: 'orange', 4: 'red' }
  return colors[difficulty] || 'default'
}

const getDifficultyText = (difficulty) => {
  const texts = { 1: '简单', 2: '普通', 3: '困难', 4: '地狱' }
  return texts[difficulty] || '未知'
}

const getCategoryColor = (category) => {
  const colors = {
    moral: 'purple',
    service: 'green',
    study: 'blue',
    reflection: 'orange'
  }
  return colors[category] || 'default'
}

const getCategoryText = (category) => {
  const texts = {
    moral: '道德重塑',
    service: '公益服务',
    study: '学习修行',
    reflection: '反思忏悔'
  }
  return texts[category] || '未知'
}

const getStatusColor = (status) => {
  const colors = {
    active: 'success',
    inactive: 'default',
    draft: 'warning'
  }
  return colors[status] || 'default'
}

const getStatusText = (status) => {
  const texts = {
    active: '激活',
    inactive: '停用',
    draft: '草稿'
  }
  return texts[status] || '未知'
}

// 事件处理
const handleCreate = () => {
  isEditing.value = false
  resetTaskForm()
  showTaskModal.value = true
}

const handleSearch = () => {
  message.info('搜索任务')
}

const applyFilters = () => {
  message.success('筛选已应用')
}

const resetFilters = () => {
  searchText.value = ''
  filterDifficulty.value = undefined
  filterStatus.value = undefined
  filterCategory.value = undefined
  message.info('筛选条件已重置')
}

const resetTaskForm = () => {
  taskForm.value = {
    name: '',
    description: '',
    category: undefined,
    difficulty: undefined,
    meritReward: 100,
    expReward: 20,
    timeLimit: 30,
    penalty: 50,
    requirements: ''
  }
  taskFormRef.value?.resetFields()
}

const handleSaveTask = async () => {
  try {
    await taskFormRef.value.validate()
    saving.value = true

    // 模拟保存延迟
    await new Promise((resolve) => setTimeout(resolve, 1000))

    if (isEditing.value) {
      // 编辑现有任务
      const index = tasksData.value.findIndex((task) => task.id === selectedTask.value.id)
      if (index !== -1) {
        tasksData.value[index] = {
          ...tasksData.value[index],
          ...taskForm.value,
          updatedTime: new Date().toISOString().split('T')[0]
        }
      }
      message.success('任务更新成功')
    } else {
      // 新增任务
      const newTask = {
        id: Date.now(),
        ...taskForm.value,
        status: 'draft',
        assignedCount: 0,
        createdTime: new Date().toISOString().split('T')[0]
      }
      tasksData.value.unshift(newTask)
      message.success('任务创建成功')
    }

    showTaskModal.value = false
    resetTaskForm()
  } catch (error) {
    message.error('请完善任务信息')
  } finally {
    saving.value = false
  }
}

const handleMenuClick = ({ key }, record) => {
  selectedTask.value = record

  switch (key) {
    case 'view':
      showDetailModal.value = true
      break

    case 'edit':
      isEditing.value = true
      taskForm.value = { ...record }
      showTaskModal.value = true
      break

    case 'copy':
      isEditing.value = false
      taskForm.value = {
        ...record,
        name: `${record.name} (副本)`,
        id: undefined
      }
      showTaskModal.value = true
      message.info('已复制任务，请修改后保存')
      break

    case 'toggle':
      const newStatus = record.status === 'active' ? 'inactive' : 'active'
      record.status = newStatus
      message.success(`任务已${newStatus === 'active' ? '激活' : '停用'}`)
      break

    case 'delete':
      Modal.confirm({
        title: '确认删除',
        content: `确定要删除任务"${record.name}"吗？此操作不可撤销。`,
        okText: '确认',
        cancelText: '取消',
        okType: 'danger',
        onOk() {
          const index = tasksData.value.findIndex((task) => task.id === record.id)
          if (index !== -1) {
            tasksData.value.splice(index, 1)
            message.success('任务删除成功')
          }
        }
      })
      break
  }
}

// 生命周期
onMounted(() => {
  // 初始化数据加载
})
</script>

<style lang="scss" scoped>
.task-setting-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  padding: 24px;

  .breadcrumb {
    margin-bottom: 24px;

    :deep(.ant-breadcrumb-link) {
      color: rgba(255, 255, 255, 0.65);

      &:hover {
        color: #ffd700;
      }
    }

    :deep(.ant-breadcrumb-separator) {
      color: rgba(255, 255, 255, 0.45);
    }
  }

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;

    .header-content {
      .page-title {
        color: #ffd700;
        font-size: 28px;
        font-weight: 600;
        margin: 0 0 8px 0;
      }

      .page-subtitle {
        color: rgba(255, 255, 255, 0.65);
        font-size: 16px;
        margin: 0;
      }
    }

    .header-actions {
      :deep(.ant-btn-primary) {
        background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
        border-color: #ffd700;
        color: #1a1a2e;
        font-weight: 500;

        &:hover {
          background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
          border-color: #ffed4e;
          box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
        }
      }
    }
  }

  .stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 32px;

    .stat-card {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      transition: all 0.3s ease;

      :deep(.ant-card-body) {
        padding: 24px;
      }

      .stat-content {
        display: flex;
        align-items: center;
        gap: 16px;

        .stat-icon {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;

          &.stat-icon-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
          }

          &.stat-icon-success {
            background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
            color: white;
          }

          &.stat-icon-warning {
            background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
            color: white;
          }

          &.stat-icon-info {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
            color: #1a1a2e;
          }
        }

        .stat-info {
          .stat-value {
            font-size: 28px;
            font-weight: 600;
            color: #ffd700;
            line-height: 1;
            margin-bottom: 4px;
          }

          .stat-label {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.65);
          }
        }
      }
    }
  }

  .filter-card,
  .table-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin-bottom: 24px;

    :deep(.ant-card-body) {
      padding: 24px;
    }
  }

  .table-card {
    :deep(.ant-table) {
      background: transparent;

      .ant-table-thead > tr > th {
        background: rgba(255, 255, 255, 0.05);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.85);
        font-weight: 500;
      }

      .ant-table-tbody > tr {
        &:hover > td {
          background: rgba(255, 215, 0, 0.1) !important;
        }

        > td {
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
          color: rgba(255, 255, 255, 0.85);
        }
      }
    }
  }

  .task-info {
    .task-name {
      color: #ffd700;
      font-weight: 500;
      margin-bottom: 4px;
    }

    .task-description {
      color: rgba(255, 255, 255, 0.65);
      font-size: 12px;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }

  .rewards-info {
    display: flex;
    flex-direction: column;
    gap: 2px;

    .merit-points {
      color: #ffd700;
      font-weight: 500;
      font-size: 12px;
    }

    .exp-points {
      color: #52c41a;
      font-weight: 500;
      font-size: 12px;
    }
  }

  :deep(.ant-input),
  :deep(.ant-select-selector) {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);

    &:hover,
    &:focus {
      border-color: #ffd700;
      box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
    }
  }

  :deep(.ant-select-arrow) {
    color: rgba(255, 255, 255, 0.45);
  }

  :deep(.ant-tag) {
    border-radius: 6px;
    font-weight: 500;
  }

  :deep(.danger-item) {
    color: #ff4d4f;

    &:hover {
      background: rgba(255, 77, 79, 0.1);
    }
  }

  // 模态框样式
  :deep(.ant-modal) {
    .ant-modal-content {
      background: rgba(26, 26, 46, 0.95);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .ant-modal-header {
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .ant-modal-title {
        color: #ffd700;
        font-weight: 600;
      }
    }

    .ant-modal-body {
      color: rgba(255, 255, 255, 0.85);
    }

    .ant-modal-footer {
      background: transparent;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
  }

  :deep(.ant-form-item-label > label) {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
  }

  :deep(.ant-input),
  :deep(.ant-input-number),
  :deep(.ant-textarea) {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);

    &:hover,
    &:focus {
      border-color: #ffd700;
      box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
    }

    &::placeholder {
      color: rgba(255, 255, 255, 0.45);
    }
  }

  .task-detail {
    :deep(.ant-descriptions) {
      .ant-descriptions-item-label {
        background: rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.85);
        font-weight: 500;
      }

      .ant-descriptions-item-content {
        background: rgba(255, 255, 255, 0.02);
        color: rgba(255, 255, 255, 0.85);
      }
    }

    .merit-points {
      color: #ffd700;
      font-weight: 500;
    }

    .exp-points {
      color: #52c41a;
      font-weight: 500;
    }

    .penalty-text {
      color: #ff4d4f;
      font-weight: 500;
    }
  }

  @media (max-width: 768px) {
    padding: 16px;

    .stats-cards {
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }

    :deep(.ant-modal) {
      margin: 0;
      max-width: 100vw;

      .ant-modal-content {
        margin: 20px;
      }
    }
  }
}
</style>
